<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<button class="btn">按钮</button>

<script>
// this关键字
// this是一个指针型变量
// 在JS中this指向并不是固定的，它会随着运行环境改变而改变
// this通常在函数中使用，this指向当前函数的调用对象
// 在定义函数时，this不能确定指向，函数调用时才能确定指向

// 1.在全局直接访问this，指向window对象
// console.log( this );

// 2.在函数中的this，指向当前函数的调用对象（谁调用函数指向谁）
function show(){
    console.log( this );
}

// show();// this -> window
// window.show();// this -> window

var name = '张三';
var obj = {
    name: '李四',
    age: 24,
    sex: '女',
    sayHi: function (){
        console.log( '大家好，我叫：' + this.name );
    }
}
obj.sayHi();// this -> obj

var say = obj.sayHi;
say();// this -> window
window.say();// this -> window

obj.show = show;
obj.show();// this -> obj


// 3.在事件处理函数中，this指向添加事件的元素
var btn = document.querySelector('.btn');

btn.onclick = function (){// 事件处理函数
    console.log( this );// this -> btn
    show();// this -> window
}

btn.onclick = show;// 将show作为事件处理函数 this -> btn


// 4.在构造函数中的this，指向创建出来的实例对象
function Cat(c){
    this.color = c;
}
// Cat('red');// this -> window
var cat1 = new Cat('blue');// this -> cat1


var n = '老四';
var obj2 = {
    n: '王五',
    say: function (){
        console.log( this.n );// '王五' this -> obj2
        function fn(){
            console.log( this.n );// '老四'  this -> window
        }
        fn();
        // window.fn();
    }
}
obj2.say();

</script>
</body>
</html>